<template>
  <div class="scroll">
    <el-collapse v-model="activeGroupIDs">
      <el-collapse-item v-for="group in filterGroups" :key="group.id" :title="group.title" :name="group.id">
        <palette-node @addsopes="addsopes" v-for="node in group.nodes" :key="node.id" :data="node" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits, computed } from 'vue';
import { paletteNode } from './components'

const emit = defineEmits(['updatesopes'])

const addsopes = function(){
  emit('updatesopes')
}
const activeGroupIDs = computed(() => {
  return props.filterGroups.map(g => g.id)
})

const props = defineProps({
  filterGroups: {
    type: Array,
    default: [
      {
        id: 1,
        title: '图库',
        nodes: [
          {
            id: 1,
            name: 'line'
          }
        ]
      }
    ]
  }
})

</script>
<style lang="scss" scoped>
.scroll{
  font-size: 14px;
}
</style>